<style src="@/css/components/table.css"></style>
<style>

.permissions-detail {
    background: #fff;
    padding: 30px;
}

.power-name {
    margin-right:10px;
}
</style>
<template>
    <section class="permissions-detail">
         <el-table :data="menuList" style="width: 100%" class="newTab first-table">
            <el-table-column prop="Title" label="权限页面" min-width="20%"></el-table-column>
            <el-table-column label="功能" min-width="80%">
                <template slot-scope="scope">
                    <span class="power-name" v-for="item in permissionList[scope.row.Code]">{{item.Name}}</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区 -->
        <!-- <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage"></pageModel> -->

        <!-- section>

            <div>
                <el-row class="power-list-head">
                    <el-col :span="4">权限页面</el-col>
                    <el-col :span="20">功能</el-col>
                </el-row>
                <template v-for="one in menuList">
                    <el-row class="power-list-main">
                        <el-col :span="4" class="page-name">{{one.Title}}</el-col>
                        <el-col :span="20">
                            <template v-for="item in permissionList[one.Code]">
                                <span class="power-name">{{item.Name}}</span>
                            </template>
                        </el-col>
                    </el-row>
                </template>
            </div>
            <div class="no-resource" v-show="menuList.length==0">
                <div><img src="../../images/ic-default.png" alt=""></div>
                <p class="no-word">暂未分配权限</p>
            </div>
        </section> -->
    </section>
</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            roleID:this.$route.query.roleID,
            roleName:this.$route.query.roleName,
            list:[],
            menuList:[],
            permissionList:[],
            pageInfo: {
                pageSize: 20,
                total:0,
                page:1
            },
            dialogLittle:{
                centerDialogVisible: false,
                employeeID:''
            },
            employeeSelectList:[],
            headTabID:1,
            path:[
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'角色管理',
                    'path':'/organization/role-list'
                },
                {
                    'name':'权限明细'
                }
            ]
        }
    },
    mixins: [mixinMethods],
    methods: {
        getPowerList(){
            axios.post('/com/role/viewPermission', qs.stringify({
                roleID:this.roleID
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.menuList = d.data.MenuList;
                    this.permissionList = d.data.PermissionList;
                }else {
                    this.$message.error(d.msg)
                }
            });
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        this.getPowerList()
    }
}


</script>
